<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>重定向与别名</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
  <div id="app">
    <router-view></router-view>
  </div>

  <script>
    // 1. 定义路由组件
    const User = { template: `<div>User</div>` };
    const Foo = { template: `<div>Foo</div>` };
    const Bar = { template: `<div>Bar</div>` };

    // 2. 创建`router`实例
    const router = new VueRouter({
      routes: [
        {
          // 当浏览器遇到`/`路径时, 直接跳转到`/foo`路径上, 渲染对应路由组件
          // TODO: 需要注意的是, `导航守卫`并没有应用在跳转路由上「/」, 而仅仅应用在其目标上「/foo」, 在下面这个例子中, 为`/a`路由添加一个
          // `beforeEnter`守卫并不会有任何效果
          path: '/',
          // 「1」 字符串地址
          // redirect: '/foo',
          // 「2」 对象: 命名的路由
          // redirect: { name: 'bar' },
          // 「3」 方法: 动态返回重定向目标
          redirect: to => {
            console.log('to =>', to);
            // 返回 重定向的 字符串路径/路径对象
            return { path: '/foo' };
          },
          component: User
        },
        {
          path: '/foo',
          name: 'foo',
          component: Foo
        },
        {
          path: '/bar',
          name: 'bar',
          component: Bar
        }
      ]
    });

    // 3. 创建`vue`实例并将router挂载
    const app = new Vue({
      router
    }).$mount('#app');
  </script>

</body>

</html>